<template>
  <el-form label-width="100px">
    <el-form-item label="SPU名称">
      <el-input v-model="SpuParams.spuName" placeholder="SPU名称" />
    </el-form-item>
    <el-form-item label="SPU品牌">
      <el-select v-model="SpuParams.tmId" placeholder="请选择品牌">
        <el-option v-for="(tm, index) in AllTradeMark" :key="tm.id" :label="tm.tmName" :value="tm.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="SPU描述">
      <el-input v-model="SpuParams.description" type="textarea" rows="4" placeholder="SPU描述" />
    </el-form-item>
    <el-form-item label="SPU图片">
      <!-- 上传图片:action图片上传的地址
            file-list:照片墙需要展示的数据【数组：数组里面的元素务必要有name、url属性】
        -->
      <el-upload
        v-model:file-list="imgList"
        action="/api/admin/product/fileUpload"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :before-upload="handlerUpload"
      >
        <el-icon><Plus /></el-icon>
      </el-upload>

      <el-dialog v-model="dialogVisible">
        <img
          w-full
          :src="dialogImageUrl"
          alt="Preview Image"
          style="width: 100%; height: 100%"
        />
      </el-dialog>
    </el-form-item>
    <el-form-item label="SPU销售属性">
      <el-select v-model="saleAttrIdAndValueName" :placeholder="unSelectSaleAttr.length ? `还${unSelectSaleAttr.length}个未选择` : '暂无数据可选'" clearable>
        <el-option :value="`${item.id}:${item.name}`" v-for="(item,index) in unSelectSaleAttr" :key="item.id" :label="item.name" value="item.id"></el-option>
      </el-select>
      <el-button :disabled="saleAttrIdAndValueName?false : true" style="margin-left: 10px;" type="primary" size="default" icon="Plus" @click="addSaleAttr">添加属性</el-button>
      <!-- 展示的是当前SPU属于自己的销售属性 -->
      <el-table border style="margin: 10px 0" :data="saleAttr">
        <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
        <el-table-column label="销售属性名字" align="center" width="150px" prop="saleAttrName"></el-table-column>
        <el-table-column label="销售属性值" align="center1" width="width">
          <!-- row：即为当前SPU已有的销售属性对象 -->
          <template #="{row, $index}">
            <el-tag v-for="(item, index) of row.spuSaleAttrValueList" :key="item.id" closable class="mx-1" style="margin:0 5px" @close="row.spuSaleAttrValueList.splice(index, 1)">
              {{ item.saleAttrValueName }}
            </el-tag>
            <el-input v-if="row.flag==true" size="small" placeholder="请你输入属性值" style="width: 100px;margin:0 5px" v-model="row.saleAttrValue" @blur="toLook(row)"></el-input>
            <el-button v-else type="primary" size="small" icon="Plus" @click="toEdit(row)">
              New Tag
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150px">
          <template #="{row, $index}">
            <el-button type="danger" size="small" icon="Delete" @click="saleAttr.splice($index, 1)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="addOrUpdateSpu">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref, reactive, defineEmits, defineExpose, computed } from 'vue'
import { reqAllTrademark, reqSpuImageList, reqSpuHasSaleAttr, reqAllSaleAttr } from '@/api/product/spu/index'
import type { AllTradeMark, SpuHasImg, SaleAttrResponseData, HasSaleAttrResponseData, TradeMark, SpuImg, SpuData, SaleAttr, HasSaleAttr,SaleAttrValue } from '@/api/product/trademark/type'
// import type { SpuData, SpuImg } from '@/api/product/spu/type'

let $emit = defineEmits(['changeScene'])
// 子组件点击取消按钮，通知父组件切换场景为 1， 展示已有的SPU数据
const cancel = () => {
  $emit('changeScene', 0)
}

// 存储所有的SPU的这些数据
let AllTradeMark = ref<TradeMark[]>([])
// 商品的图片
let imgList = ref<SpuImg[]>([])
// 已有的SPU销售属性
let saleAttr = ref<SaleAttr[]>([])
// 全部的销售属性
let allSaleAttr = ref<HasSaleAttr[]>([])
// 存储已有的SPU对象
let SpuParams = ref<SpuData>({
  category3Id: '', // 收集三级分类的ID
  spuName: '', // SPU名字
  description: '', // spu描述
  tmId: '', // 品牌的ID
  spuImageList: [],
  spuSaleAttrList: [],
})

// 控制对话框的显示与隐藏的按钮
let dialogVisible = ref<boolean>(false)
// 存储预览图片的地址
let dialogImageUrl = ref<any>('')
// 收集将来还未选择的销售属性的ID与属性值的名字
let saleAttrIdAndValueName = ref<string>('')

// 子组件书写一个方法
const initHasSpuData = async (spu: SpuData) => {
  // 存储已有的SPU对象，将来在模板中展示
  SpuParams.value = spu
  // spu：即为父组件传递过来的已有的SPU对象【不完整】
  // 获取全部的品牌的数据
  let res: AllTradeMark = await reqAllTrademark()
  console.log('res', res)
  // 获取某一个品牌旗下全部售卖商品的图片
  let res1: SpuHasImg = await reqSpuImageList((spu.id as number))
  console.log('res1', res1)
  // 获取已有的SPU销售属性的数据
  let res2: SaleAttrResponseData = await reqSpuHasSaleAttr((spu.id as number))
  console.log('res2', res2)
  let res3: HasSaleAttrResponseData = await reqAllSaleAttr()
  console.log('res3', res3)
  // 存储全部品牌的数据
  AllTradeMark.value = res.data
  // 全部SPU对应的商品图片
  imgList.value = res1.data.map(item => {
    return {
      name: item.imgName,
      url: item.imgUrl,
    }
  })
  // 存储已有的SPU的销售属性
  saleAttr.value = res2.data
  // 存储全部的销售属性
  allSaleAttr.value = res3.data
}

// 照片墙点击预览按钮的时候触发的钩子
const handlePictureCardPreview = (file: any) => {
  console.log('123', file)
  dialogImageUrl.value = file.url
  dialogVisible.value = true
}
// 照片墙删除文件的钩子
const handleRemove = () => {
  console.log(123)
}
// 照片墙上传成功之前的钩子，约束文件的大小与类型
const handlerUpload = (file: any) => {
  if (file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/gif'){
    // return true
    if (file.size / 1024 / 1024 < 3) {
      return true
    } else {
      ElMessage({
        type: 'error',
        message: '上传的文件大小不得超过3M',
      })
      return false
    }
  } else {
    ElMessage({
      type: 'error',
      message: '上传的文件务必是PNG|JPG|GIF|JPEG',
    })
    return false
  }
}

// 计算出当前SPU还未拥有的销售属性
let unSelectSaleAttr = computed(() => {
  // 全部的销售属性： 颜色、版本、尺码
  // 已有的销售属性：颜色、版本
  let unSelectAttr = allSaleAttr.value.filter((item) => {
    return saleAttr.value.every((item1) => {
      return item.name != item1.saleAttrName
    })
  })
  return unSelectAttr
})

// 添加销售属性的方法
const addSaleAttr = () => {
  // 字符串切割为数组
  const [baseSaleAttrId, saleAttrName] = saleAttrIdAndValueName.value.split(':')
  // 准备一个新的销售属性对象：将来带给服务器即可
  let newSaleAttr: SaleAttr = {
    baseSaleAttrId,
    saleAttrName,
    spuSaleAttrValueList: [],
  }
  // 追加到数组当中
  saleAttr.value.push(newSaleAttr)
  // 清空收集的数据
  saleAttrIdAndValueName.value = ''
}
// showInput
// 属性值按钮的点击事件
const toEdit = (row: SaleAttr) => {
  // 点击按钮，input组件出现 -> 编辑模式
  row.flag = true
  row.saleAttrValue = ''
}

// 表单元素失去焦点的事件回调
const toLook = (row: SaleAttr) => {
  // 整理收集的属性的ID与属性值的名字
  const {baseSaleAttrId, saleAttrValue} = row
  // 整理成服务器需要的属性值形式
  let newSaleAttrValue: SaleAttrValue = {
    baseSaleAttrId,
    saleAttrValueName: (saleAttrValue as string)
  }
  // 非法情况的判断
  if ((saleAttrValue as string).trim() == '') {
    ElMessage({
      type: 'error',
      message: '属性值不能为空',
    })
    return
  }
  // 判断属性值在数组中是否存在
  let repeat = row.spuSaleAttrValueList.find(item => {
    return item.saleAttrValueName == saleAttrValue
  })
  if (repeat) {
    ElMessage({
      type: 'error',
      message: '属性值重复!',
    })
    return
  }

  // 追加新的属性值对象
  row.spuSaleAttrValueList.push(newSaleAttrValue)
  // 切换为查看模式
  row.flag = false
}

// 对外暴露子组件的方法，在父组件中才能引用
defineExpose({ initHasSpuData })

// const spu = reactive({
//   spuName: '',
//   tmId: '',
//   description: '',
// })
// let tradeMarkList = ref<any>([])
</script>
<style scoped lang="scss"></style>
